<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
    <link rel="stylesheet" type="text/css" href="/static/layer/theme/default/layer.css">
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.global.js"></script>
    <script src="/static/layer/layer.js"></script>
	<script src="/static/js/common.js"></script>
    <script src="/static/js/login.js"></script>
</head>
<body>
	<!-- 导航界面 -->
	<nav>
		<div class="nav">
			<span class="lf">终于等到你</span>
			<span class="rt">爱下载资源分享平台</span>
		</div>
	</nav>
	
	<!-- 登录面板 -->
	<section class="main">
		<div class="login-type">
			<a class="checked" name="login-pwd">密码登录</a><a name="login-sms">邮箱登录</a>
		</div>
		
		<form id="lg-1" class="login-pwd login-panel" autocomplete="off">
			<input type="text" name="username" v-model.trim="username" class="inp user" placeholder="账号/手机号"/>
			<input type="password" name="password" v-model.trim="password" class="inp pwd" placeholder="密码"/>
			<!-- 处理密码眼睛 -->
			<span class="eye clos"></span>
			
			<div class="re">
				<input type="checkbox" name="remember-me" v-model="remember" id="remember-me"/>
				<label for="remember-me">下次自动登录</label>
				<a class="find-pass" href="findpass.html">忘记密码，立即找回</a>
			</div>
			
			<a class="log-btn" @click="handleTelLogin">登录</a>
			<a href="/register" class="regist">没有账号？立即注册</a>

		</form>
		
		<form id="lg-2" class="login-sms login-panel" autocomplete="off">
			<input type="text" name="email" class="inp tel" v-model.trim="email" placeholder="账号/邮箱"/>
			<input type="code" name="code" class="inp code" v-model.trim="code" placeholder="验证码"/>
			<button class="btn-code" @click.prevent="snedCode" :disabled="btnDisabled" v-text="btnText"></button>
			
			<div class="re">
				<input type="checkbox" name="remember-me" v-model="remember" id="remember"/>
				<label for="remember">下次自动登录</label>
			</div>
			
			<a class="log-btn" @click="handleEmailLogin">登录</a>
			<a href="/register" class="regist">没有账号？立即注册</a>
			
		</form>
		
		<div class="third">
			<span class="lf"></span>第三方登录<span class="rf"></span>	
		</div>
		
		<p class="third">
			<a class="zfb"><span>支付宝</span></a>
			<a class="wx"><span>微信</span></a>
			<a class="qq"><span>QQ</span></a>
		</p>
		
	</section>
	
	<footer>
		<p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
		<p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
		<p class="num">沪ICP备14048333号</p>
	</footer>
	
</body>
<script>

Vue.createApp({
    data(){
        return {
            email: "",
            code: "",
            remember: true,
            btnText: "获取验证码" ,
            btnDisabled: false,
            nextUrl: '{{ next_url }}'
        }
    },
    methods: {
        snedCode(event) {
            if (!this.email) {
                layer.msg("请输入邮箱", {icon: 5})
                return false;
            }
            if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(this.email)) {
                layer.msg('电子邮箱格式不正确', {icon: 5});
                return false;
            }
            let time = 60
            // 修改按钮中文件为 60
            this.btnText = `${time}s后重发`;
            this.btnDisabled = true ;
            let playing = setInterval(()=> {
                time -- ;
                if (time <= 0) {
                    clearInterval(playing);
                    this.btnText = "获取验证码";
                    this.btnDisabled = false;
                } else {
                    this.btnText = `${time}s后重发`;
                }
            }, 1000)
            // 发送异步请求、发送验证码邮件
            axios.post('/send-email-code', {email: this.email}, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(ret => {
                if (ret.data.code === 200) {
                    layer.msg('验证码已发送到邮箱，请注意查收', {icon: 6});
                } else {
                    layer.msg(ret.data.message, {icon: 5});
                }
            })
        },
        handleEmailLogin(event) {
            if (!this.email) {
                layer.msg('请输入邮箱', {icon: 5});
                return;
            }
            if (!this.code) {
                layer.msg('请输入验证码', {icon: 5});
                return;
            }
            const index = layer.load(2)
            axios.post('/email-login', {
                email: this.email,
                code: this.code,
                nextUrl: this.nextUrl,
            },{
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then((response) => {
                if (response.data.code === 200) {
                    window.location.href = response.data.redirectUrl;
                } else {
                    layer.msg(response.data.message, {icon: 5});
                }
            }).catch((error) => {
                layer.msg('请求失败，请稍后重试', {icon: 5});
            }).finally(()=> {
                layer.close(index);
            })
        }
    }

}).mount("#lg-2")




Vue.createApp({
    data(){
        return {
            username: '',
            password: '',
            remember: true,
            nextUrl: '{{ next_url }}'
        }
    },
    methods: {
        handleTelLogin(event) {
            if (!this.username) {
                layer.msg('请输入账号/手机号', {icon: 5});
                return;
            }
            if (!this.password) {
                layer.msg('请输入密码', {icon: 5});
                return;
            }
            const index = layer.load(2)
            axios.post('/login', {
                username: this.username,
                password: this.password,
                remember: this.remember,
                nextUrl: this.nextUrl,
            }, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then((response) => {
                if (response.data.code === 200) {
                    window.location.href = response.data.redirectUrl ;
                } else {
                    layer.msg(response.data.message, {icon: 5});
                }
            }).catch((error) => {
                layer.msg('请求失败，请稍后重试', {icon: 5});
            }).finally(()=> {
                layer.close(index);
            })
        }
    }
}).mount("#lg-1")


</script>
</html>